<template lang='pug'>
.page
  .WagesManage
    .search-form.mb-10.pl-10.pr-10
      Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="80")
        FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'select'")
            Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
              Option(
                v-for="(c_item, index) in arrListDown[item.options]"
                :value="c_item.value"
                :key="index"
              ) {{ c_item.label }}
          template(v-if="item.type === 'input'")
            Input(v-model="formData[item.model]" :placeholder="item.placeholder" clearable)
          template(v-if="item.type === 'button'")
            Button(type="info" @click="searchFn") 查询

    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="thead" :data="tableData" :stripe="true"
        @on-selection-change="handleOnSelectChange"
      )
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left
            |合计
            span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
            |条
          .pull-right.table-title-btns
            Button.mr-10(type="info" @click="handleShowCreateWagesModal('')") 新增

        template(slot-scope="{ row, index }" slot="action")
          Button.mr-10(type="text" size="small" @click="handleShowCreateWagesModal(row.id)") 修改
          Button.mr-10(type="text" size="small" @click="goEditNode(row)" :disabled="row.parameterStatus == 1") 编辑环节
          Button.mr-10(type="text" size="small" v-if="row.parameterStatus == -1" @click="enabledList(row.id, 1)") 启用
          Button.mr-10(type="text" size="small" v-if="row.parameterStatus == 1" @click="enabledList(row.id, -1)") 禁用

        .clearfix.pl-20.pr-20(slot="footer")
          Page(
            :current="tableComone.pageIndex"
            :total="tableComone.totalRows"
            @on-change="onChangePage"
            @on-page-size-change="onpageSizeChange"
            show-sizer
            show-total
            placement="top"
            prev-text="上一页"
            next-text="下一页"
            :page-size-opts="[10, 20, 30, 50, 100]"
          )

    //- 新建弹窗
    CreateWagesModal(ref="CreateWagesModal" @query="searchFn")
</template>

<script>
import { Common } from '@/utils/common.js'
import { TreatmentApi } from '@/api/Treatment.api.js'
import { basicThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import CreateWagesModal from './modal/CreateWagesModal.vue'

export default {
  name: 'wagesManage',

  components: {
    CreateWagesModal
  },

  data () {
    return {
      userId: null,
      thead: _cloneDeep(basicThead),
      tableData: [],
      tableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 10 // 当前页面展示条数
      },
      formData: {
        parameterType: '',
        parameterName: ''
      },
      formItem: [
        { type: 'select', label: '业务：', placeholder: '请选择业务', prop: 'parameterType', model: 'parameterType', options: 'parametertype', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-6' },
        { type: 'input', label: '业务类型：', placeholder: '请输入业务类型', prop: 'parameterName', model: 'parameterName', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-9 ivu-col-span-xxl-6' },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-3 ivu-col-span-xxl-3' }
      ],
      rules: {},
      arrListDown: {
        defaultRadioArr: [{ value: '1', label: '是' }, { value: '0', label: '否' }],
        parametertype: [],
        parameterstatus: []
      },
      selectedId: '', // 勾选的id集合
      selectedIdArr: [] // 勾选的id, name数组集合
    }
  },

  mounted () {
    this.userId = JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId
    this.getEnum()
    this.query()
  },

  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 查看
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },
    // 新增
    hasCreate () {
      return this.actionArr.indexOf('Create') > -1
    },
    // 编辑
    hasEdit () {
      return this.actionArr.indexOf('Edit') > -1
    },
    // 删除
    hasDelete () {
      return this.actionArr.indexOf('Delete') > -1
    },
    // 启用
    hasEnabledList () {
      return this.actionArr.indexOf('EnabledList') > -1
    },
    // 禁用
    hasDisEnabledList () {
      return this.actionArr.indexOf('DisEnabledList') > -1
    }
  },

  methods: {
    // 数据字典
    getEnum () {
      let groupName = 'treatment.parametertype,treatment.parameterstatus'
      Common.getEnum(groupName, this.arrListDown)
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        ParameterType: this.formData.parameterType,
        ParameterName: this.formData.parameterName,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await TreatmentApi.getTreatmentParameters(params)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
      this.loading = false
    },

    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedIdArr = value.map((item) => {
        return { id: item.id, name: item.name }
      })
      let arr = value.map((item) => {
        return item.id
      })
      this.selectedId = arr.join(',')
    },

    // 显示新增弹窗
    handleShowCreateWagesModal (id) {
      this.$refs.CreateWagesModal.getModel(id)
      this.$refs.CreateWagesModal.show()
      this.$refs.CreateWagesModal.isCreate = id ? false : true
      this.$refs.CreateWagesModal.arrListDown = this.arrListDown
      Object.keys(this.$refs.CreateWagesModal.formCreate).forEach(key => {
        if (key === 'enabled') {
          this.$refs.CreateWagesModal.formCreate[key] = true
        } else {
          this.$refs.CreateWagesModal.formCreate[key] = ''
        }
      })
    },

    // 启用/禁用
    async enabledList (id, parameterStatus) {
      var params = {
        parameterId: id,
        userid: this.userId,
        parameterStatus: parameterStatus
      }
      let res = await TreatmentApi.upTreatmentParameterStatus(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 删除
    async handleDel (id, enabled) {
      this.$Message.success('点击了删除')
    },

    // 去往编辑环节
    goEditNode (row) {
      var parameterTypeObj = this.arrListDown.parametertype.find(item => {
        return item.value == row.parameterType
      })
      console.log('parameterTypeObj: ', parameterTypeObj)
      this.$router.push({
        path: '/editBaseNode',
        name: 'editBaseNode',
        query: {
          parameterId: row.id
        }
      })
    }
  }
}
</script>

<style>
</style>
